<template>
    <div style="height: 100%;width: 100%">
        <!--        相关操作-->
        <div class="buttonCardLayout">
            <el-card class="box-card">
                <div style="display: inline-block;width: 100%">
                    <!--                批量删除-->
                    <el-button type="primary" class="batchDeleteButton"  @click="batchDeleteInform">批量删除</el-button>
                    <!--                新增通知-->
                    <el-button type="primary" class="addButton" @click="dialogVisible=true,dialogTitle='新增通知信息'">新增</el-button>
                    <!--                查询通知-->
                    <el-input
                            class="queryInput"
                            placeholder="请输入查询标题内容"
                            prefix-icon="el-icon-search"
                            @input="queryByCondition"
                            v-model="queryTitleLike">
                    </el-input>

                </div>

            </el-card>
        </div>
        <!--        表格内容-->
        <div class="tableCardLayout" >
            <el-card class="box-card">
                <el-table
                        :data="informData"
                        :highlight-selection-row="true"
                        @selection-change="changeSelectedIds"
                        height="600"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            sortable
                            label="标题">
                    </el-table-column>
                    <el-table-column
                            prop="userNickname"
                            label="发布人">
                    </el-table-column>
                    <el-table-column
                            sortable
                            prop="createTime"
                            label="发布时间">
                        <template slot-scope="scope">
                            {{scope.row.createTime | dateFormatFun(2)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="hitsNum"
                            sortable
                            label="点击量">
                    </el-table-column>

                    <el-table-column
                            width="300"
                            label="操作" >
                        <template slot-scope="scope">
                            <el-button type="primary" @click="toInformView(scope.row.id)">查看</el-button>
                            <el-button type="warning" @click="updateInformData(scope.row.id)">编辑</el-button>
                            <el-button type="danger"  @click="deleteInformData(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

        </div>

        <!--        分页设置-->
        <div class="pageCardStyle">
            <el-card class="box-card">
                <el-pagination
                        @size-change="changePageSize"
                        @current-change="changePageIndex"
                        :page-sizes="[8, 16, 24, 32]"
                        :page-size="pageSize"
                        :pager-count="5"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalInformsNum">
                </el-pagination>
            </el-card>
        </div>

        <!--        更新通知弹出框-->
        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="40%"
                @close="closeDialog"
                :fullscreen="false"
                :show-close="false"
                center>
            <template slot="title">

                <el-row style="width: 100%">
                    <el-col :span="8">
                        &nbsp;
                    </el-col>
                    <!--                    标题显示-->
                    <el-col :span="8" style="text-align: center;font-size: 20px">
                        <span>{{dialogTitle}}</span>
                    </el-col>
                    <!--                    右上角按钮-->
                    <el-col :span="8">
                        <div class="dialog_title">
                            <!--                    关闭按钮-->
                            <div class="dialog_title_icon" @click="dialogVisible=false">
                                <i class="el-icon-close"></i>
                            </div>
                        </div>
                    </el-col>
                </el-row>

            </template>


            <!--            输入通知内容-->
            <div v-if="dialogTitle=='新增通知信息' || dialogTitle=='编辑通知信息'">
                <!--                输入通知附属信息-->
                <div>
                    <el-card class="box-card">
                        <el-row :gutter="20">
<!--                            输入通知标题-->
                            <el-col :span="6">
                                <el-input
                                        placeholder="请输入通知标题"
                                        prefix-icon="el-icon-guide"
                                        v-model="dialogInformInfo.title">
                                </el-input>
                            </el-col>
<!--                            输入者信息-->
                            <el-col :span="6">
                                <el-input
                                        prefix-icon="el-icon-s-custom"
                                        :disabled="true"
                                        v-model="dialogInformInfo.userNickname">
                                </el-input>
                            </el-col>

                        </el-row>

                    </el-card>
                </div>
                <!--                输入通知主体-->
                <div class="blogContentStyle">
                    <el-card>
                        <el-input
                                type="textarea"
                                :rows="10"
                                placeholder="请输入通知内容"
                                v-model="dialogInformInfo.content">
                        </el-input>
                    </el-card>

                </div>
                <!--                底部栏-->
                <div>
                    <el-card class="box-card" style="text-align: center">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addOrUpdateInform">确 定</el-button>
                    </el-card>

                </div>

            </div>

        </el-dialog>
    </div>
</template>

<script>


    export default {
        name: "InformComponent",
        components:{},
        data() {
            return {
                informData: [],                   //所有的通知信息
                totalInformsNum: 0,                //通知总的数目
                pageIndex:1,                    //第xx页
                pageSize:16,                     //页面大小
                dialogVisible: false,           //新增通知弹出框是否展示
                dialogTitle:"",                 //根据dialog标题显示dialog内容
                dialogFull:false,               //dialog是否全屏显示
                selectedIds:[],                 //目前选中的id集合
                queryTitleLike:"",             //按照标题模糊查询
                dialogInformInfo:{
                    userId:localStorage.getItem('user')!=null?JSON.parse(localStorage.getItem('user')).id:null,
                    userNickname:localStorage.getItem('user')!=null?JSON.parse(localStorage.getItem('user')).nickname:"",
                },

            }
        },
        created() {
            this.mySetItem("breadCrumb",JSON.stringify("通知管理"));
            this.queryAllInforms();
        },
        methods:{
            //新增通知信息
            addOrUpdateInform(){
                if (this.dialogTitle=='新增通知信息'){            //新增
                    this.request.post("/index/inform/addInform",this.dialogInformInfo).then(res=>{
                        if (res.code=='200'){
                            this.$message({
                                message: res.data,
                                type: 'success'
                            });
                            this.queryAllInforms();
                        }else {
                            this.$message({
                                message: res.data,
                                type: 'error'
                            });
                        }
                    })
                }else{                      //更新
                    this.request.post("/index/inform/updateInform",this.dialogInformInfo).then(res=>{
                        if (res.code=='200'){
                            this.$message({
                                message: res.data,
                                type: 'success'
                            });
                            this.queryAllInforms();
                        }else {
                            this.$message({
                                message: res.data,
                                type: 'error'
                            });
                        }
                    })
                }

                this.dialogVisible=false;
            },
            //查询所有的通知信息
            queryAllInforms(){
                this.request.get("/index/inform/queryAllInforms",{
                    params:{
                        queryTitleLike: this.queryTitleLike,
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize,
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        this.informData=res.data.informs;
                        this.totalInformsNum=res.data.totalInformsNum;
                    }else if(res.code=="301"){
                        this.$message({
                            message: res.data,
                            type: 'warning'
                        });
                    }
                })
            },
            //关闭新增通知弹出框触发的事件
            closeDialog(){
                this.initDialogState();
            },
            //初始化通知弹出框
            initDialogState(){
                this.dialogInformInfo={
                    userId:localStorage.getItem('user')!=null?JSON.parse(localStorage.getItem('user')).id:null,
                    userNickname:localStorage.getItem('user')!=null?JSON.parse(localStorage.getItem('user')).nickname:"",
                };
            },
            //编辑通知内容
            updateInformData(informId){
                this.dialogTitle="编辑通知信息";
                this.request.get("/index/inform/queryInformById",{
                    params:{
                        id: informId,
                    }
                }).then(res=>{
                    if (res.code=='200'){
                        this.dialogInformInfo=res.data;
                    }else{
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
                this.dialogVisible=true;
            },
            //改变分页中的页面大小
            changePageSize(newPageSize){
                this.pageSize=newPageSize;
                this.queryAllInforms();
            },
            //改变当前页的序号
            changePageIndex(newPageIndex){
                this.pageIndex=newPageIndex;
                this.queryAllInforms();
            },
            //删除通知
            deleteInformData(informData){
                this.request.post("/index/inform/deleteInform",informData).then(res=>{
                    if (res.code=='200'){
                        this.$message({
                            message: res.data,
                            type: 'success'
                        });
                        this.queryAllInforms();
                    }else {
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
            },
            //改变选中的行时调用的方法
            changeSelectedIds(ids){
                this.selectedIds=ids.map(v =>v.id)
            },
            //批量删除通知
            batchDeleteInform(){
                this.request.post("/index/inform/batchDeleteInform",this.selectedIds).then(res=>{
                    if (res.code=='200'){
                        this.$message({
                            message: res.data,
                            type: 'success'
                        });
                        this.queryAllInforms();
                    }else {
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
            },
            //条件模糊查询通知
            queryByCondition(){
                this.queryAllInforms();
            },
            //xx

            //跳转到通知界面
            toInformView(informId){
                this.$router.push({
                    path:"/frontFramework/informManage",
                    query:{
                        id:informId,
                    }});
            },










        }
    }
</script>

<style scoped>
    .buttonCardLayout{
        padding:  10px;


    }

    .myTag{
        width: 100%;
        text-align: center;
    }

    .dialog_title{
        text-align: right;
    }

    .dialog_title_icon{
        display: inline-block;
        margin: 0px 5px;
        cursor: pointer;
        pointer-events: auto;
    }

    .blogContentStyle{
        padding: 10px 0px ;
    }

    .tableCardLayout{
        padding:  0px 10px 10px 10px;
    }

    .pageCardStyle{
        padding:  0px 10px 10px 10px;
        text-align: center;
    }

    .allowCommentStyle{
        padding-left: 10px;
        padding-right: 10px;
        line-height: 40px;
        font-size: 20px;
    }

    .addButton{
        width: 100px;
        border-radius: 10px;
        background: #63b0f4c2;
        border-color: #B5D0EC;
        margin-right: 10px;
        margin-left: 0px;
    }

    .batchDeleteButton{
        width: 100px;
        border-radius: 10px;
        background: rgba(232, 87, 108, 0.47);
        border-color: #d08dba5c;
        margin-right: 10px;
    }

    .queryInput{
        display: inline-block;
        width: 250px;
        margin-right: 10px;
    }

    .mavonEditorDialog{
        max-height: 400px;
        min-height: 400px;
    }


    /deep/ .cell{
        height: 40px;
    }

</style>